<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商家管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/css/bus-style.css">
    <style>
        thead tr th{text-align: center!important;font-weight: bold!important;}
        tr td{text-align: center!important;}
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单完成金额
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">当天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.todayOrderMoney }</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单总数量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">当天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.totalNum }</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单完成数量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">当天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.finishNum }</p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单完成金额
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">当月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.monthOrderMoney }</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单总数量
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">当月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.odernumByMonth }</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    订单完成数量
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">当月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.finishOdernumByMonth }</p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    退款总金额
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">当月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.monthRefundOrderMoney }</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    退款总数量
                    <span class="layui-badge layui-bg-cyan layuiadmin-badge">当月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.monthRefundOrderNum }</p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    退款数量
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">当天</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">${map.todayRefundOrderNum }</p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">订单类型统计</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" id="orderStatistics">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript" src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'senior']);

    $(function () {
    	var xData = [];
		var pieseries = [{}];
    	$.ajaxSettings.async = false;
		$.post("/business/queryHomeOrderMsg",function(result){
			var data = result.data;
			pieseries[0].name = '用户来源';
			pieseries[0].type = 'pie';
			pieseries[0].radius = '55%';
			pieseries[0].center = ['50%', '60%'],
			pieseries[0].selectedMode = 'single',
			pieseries[0].color = ['#1890ff', '#df5667', '#888888','#61be67'],
			pieseries[0].data = data;
		});
		$.ajaxSettings.async = true;
		console.log(pieseries);
        var echarts1 = echarts.init(document.getElementById('orderStatistics'));
        var echarts1_option = {
            title : {
                text: '订单总数',
                x:'center',
                textStyle: {
                    fontSize: 18,
                },
                subtextStyle: {
                    color: '#595959',
                    fontSize: 16,
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c}元 ({d}%)"
            },
            label: {
                show: true,
                color:'black',
                formatter: function(param) {
                    return param.name + '\n' + param.value.toFixed(2) + '元,  ' + Math.round(param.percent) + '%';
                }
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:['普通订单','拼团订单','积分订单']
            },
            series : pieseries[0]
        };
        echarts1.setOption(echarts1_option);
    })
</script>
</body>
</html>